import React, { FC, useState, ChangeEvent } from 'react'
import classNames from 'classnames'
import { useDispatch } from 'react-redux'
import { Input, message } from 'antd'
import useGetComponentInfo from '../../../hooks/useGetComponentInfo'
import { Button, Space } from 'antd'
import { EyeInvisibleFilled, LockOutlined } from '@ant-design/icons'
import {
  changeSleectedId,
  changeCompoentTitle,
  toggleComponentLock,
  changeComponentHidden,
  moveCompoent
} from '../../../store/componetnsReducer'
import styles from './Layers.module.scss'
import SortableContainer from '../../../components/DragSorttable/SortableContainer'
import SortableItem from '../../../components/DragSorttable/SortableItem'
const Layers: FC = () => {
  const { componetnList, selectedId } = useGetComponentInfo()
  const dispathc = useDispatch()
  //记录当前正在修改标题的组件
  const [changeingTitelId, setChangeTitleId] = useState('')
  // 点击选中组件
  function handleTitleClick(fe_id: string) {
    console.log(componetnList, 'componetnList', fe_id)

    const curComp = componetnList.find(c => c.fe_id == fe_id)
    if (curComp && curComp.isHidden) {
      message.info('不能选中隐藏组件')
      return
    }
    //未选中的组件第一次点击为选中组件，只有点击已经选中的组件才会变成input进行输入
    if (fe_id !== selectedId) {
      //点击的不是已经选中的组件执行选中
      dispathc(changeSleectedId(fe_id))
      setChangeTitleId('')
      return
    }
    setChangeTitleId(fe_id)
  }
  function changTitle(e: ChangeEvent<HTMLInputElement>) {
    const newTitle = e.target.value.trim()
    if (!newTitle) return
    if (!selectedId) return
    dispathc(changeCompoentTitle({ fe_id: selectedId, title: newTitle }))
  }
  // 切换隐藏显示
  function changeHiddent(fe_id: string, isHidden: boolean) {
    dispathc(changeComponentHidden({ fe_id, isHidden: isHidden }))
  }
  //切换 锁定、解锁
  function changeLocked(fe_id: string) {
    dispathc(toggleComponentLock({ fe_id }))
  }
  //SortableContainer组件必须要一个id属性
  const componetnListWithId = componetnList.map(c => ({ ...c, id: c.fe_id }))
  //拖拽函数结束
  function onDragEnd(oldIndex: number, newIndex: number) {
    dispathc(moveCompoent({oldIndex,newIndex}))
  }
  return (
    <SortableContainer items={componetnListWithId} onDragEnd={onDragEnd}>
      {componetnList.map(c => {
        const { fe_id, title, isHidden, isLocked } = c
        //拼接 title className
        const titleDefaultClassName = styles.title
        const seltctedClassName = styles.selected
        const titleClassName = classNames({
          [titleDefaultClassName]: true,
          [seltctedClassName]: fe_id === selectedId,
        })
        return (
          <SortableItem key={fe_id} id={fe_id}>
            <div className={styles.wrapper}>
              <div className={titleClassName} onClick={() => handleTitleClick(fe_id)}>
                {fe_id === changeingTitelId && (
                  <Input
                    value={title}
                    onPressEnter={() => setChangeTitleId('')}
                    onBlur={() => setChangeTitleId('')}
                    onChange={changTitle}
                  />
                )}
                {fe_id !== changeingTitelId && title}
              </div>
              <div className={styles.handler}>
                <Space>
                  <Button
                    onClick={() => changeHiddent(fe_id, !isHidden)}
                    size="small"
                    shape="circle"
                    className={!isHidden ? styles.btn : ''}
                    icon={<EyeInvisibleFilled />}
                    type={isHidden ? 'primary' : 'text'}
                  />
                  <Button
                    onClick={() => {
                      changeLocked(fe_id)
                    }}
                    size="small"
                    shape="circle"
                    className={!isLocked ? styles.btn : ''}
                    icon={<LockOutlined />}
                    type={isLocked ? 'primary' : 'text'}
                  />
                </Space>
              </div>
            </div>
          </SortableItem>
        )
      })}
    </SortableContainer>
  )
}
export default Layers
